<template>
  <div class="brand-container">
    <template v-if="images.length > 0">
      <div class="brand-container-images" v-for="(item, index) in images" :key="index">
        <template v-if="item.imageList.length">
          <div class="title jzt-shs-medium">{{ item.title }}</div>
          <div class="image-container">
            <div class="image-list-item" v-for="(img, _index) in item.imageList" :key="_index">
              <el-image :src="img" fit="cover"></el-image>
            </div>
          </div>
        </template>
      </div>
      <div class="brand-container-editor" v-if="editorContent">
        <div class="title mb10">品牌介绍</div>

        <div v-html="editorContent"></div>
        <!-- <Editor
        style="height: 500px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        v-model.trim="editorContent"
        :mode="editorModel"
        @onCreated="editorCreated"
      /> -->
      </div>
    </template>
    <el-empty v-else description="这里暂时什么都没有"></el-empty>
  </div>
  <el-backtop :bottom="100">
    <div class="upLogo">
      <img src="../imgs/upLogo.png" alt="" />
    </div>
  </el-backtop>
</template>
<script setup>
import { onMounted, ref, defineProps } from "vue";
import { brandDetail } from "@/apis/shopHome/detail";
// import { useRoute } from "vue-router";
import { shopHomeDetail } from "@/apis/shopCategories/index";
import { Editor } from "@wangeditor/editor-for-vue";

// const route = useRoute();
// const productId = route.query.id;
const props = defineProps({
  brandId: {
    type: String,
    default() {
      return "";
    }
  }
});
const images = ref([
  {
    title: "环保检测证书",
    imageList: []
  },
  {
    title: "商品质量检查报告",
    imageList: []
  },
  {
    title: "品牌授权证书",
    imageList: []
  }
]);

const editorInstance = ref(null);
const editorConfig = ref({
  placeholder: "",
  readOnly: true
});
const editorModel = ref("default");
const editorContent = ref("");
const editorCreated = editor => {
  editorInstance.value = Object.seal(editor);
  editorInstance.value.disable();
};
const getBrandDetail = async () => {
  const postData = new FormData();
  postData.append("brandId", props.brandId == null ? 0 : props.brandId == undefined ? 0 : props.brandId);
  const { data } = await brandDetail(postData);
  editorContent.value = data.content || "";
  images.value[0].imageList = data?.envCertificationsPicUrls || [];
  images.value[1].imageList = data?.quaCheckPicUrls || [];
  images.value[2].imageList = data?.bandPutPicUrls || [];
};
onMounted(() => {
  getBrandDetail();
});
</script>
<style lang="scss" scoped>
@use "@/assets/styles/mixin";

.brand-container {
  .title {
    font-weight: 500;
    font-size: 18px;
    color: #1a1a1a;
    line-height: 24px;
  }

  &-images {
    .image-container {
      @include mixin.flex-align;
      margin: 10px 0 40px;
      overflow-y: hidden;
      overflow-x: auto;

      .image-list-item {
        width: 388px;
        height: 300px;
        flex-shrink: 0;

        & + .image-list-item {
          margin-left: 18px;
        }

        :deep(.el-image) {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.shuxing {
  min-height: 500px;
  background: #fff;
  margin-bottom: 20px;
  padding: 5px 20px 20px 20px;

  .title {
    font-weight: 600;
    font-size: 18px;
    color: #1a1a1a;
    line-height: 24px;
    margin-top: 20px;
  }

  .shop-info {
    min-height: 500px;
  }

  .editor-info {
    min-height: 500px;
  }
}

.upLogo {
  @include mixin.flex-center;
  height: 50%;
  width: 50%;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
}
</style>
